<script setup>
import dayjs from 'dayjs';

import axios from 'axios';
import { useRequest } from 'vue-request';

const getTime = () => dayjs(new Date()).format('YYYY-MM-DD HH:mm:ss');
const time = ref(getTime());

function testService(val) {
  return new Promise(resolve => {
    axios.get('/test', { params: val }).then(({ data }) => {
      resolve(data.data.data);
    });
  });
}

const { data, loading, run: getapi, error } = useRequest(testService, {
  manual: false, //非手工触发
  onSuccess: function (res) {
    time.value = getTime();
    console.log(res);
  }
});
</script>

<template>
  <div class="p-10">
    <div>发起请求时间：{{ time }}</div>
    <div v-show="error">error: {{ error }}</div>
    <hr class="m-4" />
    <div v-show="loading">loading...</div>
    <div v-for="(row, key) in data">{{ key + 1 }}: {{ row.origin || '未知' }} {{ row['address'] }}</div>
    <hr class="m-4" />
    <button type="button" @click="$router.back(-1)">[返回]</button>
    <button type="button" @click="getapi({ id: 123 })">[换一批]</button>
    <router-link :to="{ path: '/demo/about', query: { id: '112' } }" target="_blank">[Markdown文件演示]</router-link>
  </div>
</template>

<style scoped lang="scss"></style>
